Search Results for: mega dropdown menu

How to add a WooCommerce cart widget to your mega menu dropdown

How to add a cart widget to your menu This tutorial shows you how to add a submenu to your Cart Summary / Info item which displays a mini cart. Please note that the styling of your WooCommerce cart widget will be dictated by WooCommerce and your theme (if your theme provides cart widget styles. UberMenu does not apply its own styling to the cart widget 1. Add a Widget Area item as a child of your Cart Summary item In Appearance > Menus, add a new Widget Area item from the UberMenu Advanced Items group. Drag it into position as a child below your top level cart summary item. 2. Set up the Widget Area In your new Widget Area item, open the UberMenu settings and enter the name for your widget area in the Custom Widget Area setting. We’ll use Cart Click Save Menu Item to save the UberMenu item settings. Click Save Menu to save the new menu item to the menu – or you can do this later after you’ve set up the Widget in Step 3. 3. Add the widget Navigate to Appearance > Widgets in your WordPress admin. Find the Cart Widget Drag it into the [UberMenu] Cart widget area You can remove the title to just show the cart with no header above it if you like. Click Save to save the widget. 4. Set the submenu position and width, disable the submenu indicator (optional) Back in Appearance > Menus, Open the UberMenu menu item settings for the top level (Cart summary) item In the General tab, enable the Disable Submenu Indicator setting. In the Submenu tab, set the Mega Submenu Position to Right Edge of Parent Item or as desired. In the Submenu tab, set the Submenu Width to 450px or as […]

How can I use dropdowns inside my mega submenus?

By default, your normal items within a mega submenu will be visible when the submenu is opened. By leaving the Submenu Type set to “Auto”, these column items become stacks. If you switch the Submenu Type to Mega or Flyout, you will get a dropdown instead, and this article deals with that situation. Flyouts within Mega Submenus are not recommended I do not generally recommend using dropdowns within mega submenus. This is generally confusing for users and leads to bad UX, so you should consider whether this is really the best format for your submenu. Generally, better formats would include using Tabs or else Flyout submenus as your first level and mega submenus as your second level. These formats achieve similar effects (hidden content revealed on activation within a submenu) in a more structured format. Enabling Dropdowns within Mega Submenus If you wish to allow dropdowns within a mega submenu, you can enable that in the Control Panel > Main UberMenu Configuration > Submenus > Allow Dropdown within Mega Submenu Please note: if you enable this setting, you cannot use the “Slide” submenu transition. This is because the slide transition requires hidden overflow to work, while dropdowns within mega submenus requires visible overflow to work. If you want to use this setting, you must switch to a Transition other than Slide Multi-level mega submenus (intended use case) One good use (really the intended one) for this is to allow a single-line submenu to have additional mega submenus so that you can have a double-level mega menu. This is a very specific scenario, however. Here’s the result when using the setting as intended:

Submenu Types

Appearance > Menus > Menu Item Settings > Submenu Submenu Types There are 3 types of submenus: Mega, Flyout, and Stack. Mega A mega submenu is a dropdown submenu which contains multiple columns of content. All levels of the submenu menu are shown at once. See also Submenu Columns Submenu Position Submenu Width Submenu Bounds (Maximum Submenu Width) Mega Submenu Layouts Video Tutorial: How to recreate the UberMenu 3 Mega Menu Submenu Flyout A flyout submenu is a dropdown submenu which contains a single column of content representing a single level of the menu tree structure. Additional submenus are displayed to the left or right of the main submenu when hovering over an item that has child items. See also Submenu Position How to create the UberMenu 3 Flyout Submenu Stack A stack submenu is a static submenu which is always visible when its parent item is visible. Its contents are stacked vertically. This submenu type wraps the third level of items in a mega submenu. Automatic Submenu Type By default, UberMenu will manage the submenu type for each item automatically. These are the defaults: Top level By default, all top level items will have Mega submenus. To create a flyout submenu, just change the type to Flyout Submenu of Flyout By default, all submenus of flyout menus will also be flyouts. Submenu of Mega By default, all submenus inside a mega submenu will be stacks. This should not be changed. Setting the Submenu Type To change the submenu type to something other than the automatic type, open the settings for the submenu’s parent item and click the Submenu tab.

How to add a Vertical UberMenu in a Sidebar

Are you using UberMenu 3? Please check out the UberMenu 3: Vertical Menu in a Sidebar article. Adding a new menu in a sidebar If your theme already includes a sidebar menu with a registered theme location, you can use UberMenu as usual and simply activate that theme location. However, if you need to add a new menu where one previously did not exist in the sidebar, you’ll want to add a new text widget containing UberMenu via the Easy Integration shortcode. Enable UberMenu Easy Integration in the UberMenu Options Panel Activate “UberMenu” in Activate Uber Menu Locations and set your desired menu under “UberMenu” in Theme Locations in Appearance > Menus. Add a new Text Widget to the sidebar of your choice. Set the content of the Text Widget to: [uberMenu_easyIntegrate echo=”false”] How to place the menu in a RIGHT sidebar Please note that this FAQ is here to assist you as a reference guide, but it is considered a customization outside the realm of supported features. By default, UberMenu flys out to the right, so we’ll need to add some custom CSS to adjust that if we’re using it in a right sidebar. After completing the above steps, continue with these instructions for a menu in the right sidebar: Add this CSS to either your custom.css file or to a location where you store custom CSS Modify any other CSS you want, for example to remove or reverse the dropdown/flyout arrow indicators. You may want to adjust the submenu styles, for example: Customize the menu as usual. Reverse Arrows Here’s some code to help with reversing the arrow indicators

Twenty Twenty One

Twenty Twenty One will create residual styling on mobile by wrapping UberMenu inside its own menu, and add +/- buttons within the menu items which break the menu layout. To resolve this, we will use manual integration to replace the theme’s menu with UberMenu, and remove the theme’s toggle button filter via a child theme. Manual Integration & Button removal 1. Set up your child theme If you haven’t already, install and activate your child theme. We will make changes here to preserve them when the parent theme is updated. If you are not sure how to create a child theme, the Child Theme Configurator plugin is an easy way to generate one. 2. Copy the site-nav.php template into the child theme In the child theme, create the following folder structure: template-parts/header Copy the template-parts/header/site-nav.php file from the parent theme into the same directory in the child theme. 3. Edit the nav template Open the site-nav.php file that you just created in the child theme. We’ll conditionally replace the entire #site-navigation block with the UberMenu manual integration code, like this: 4. Remove the toggle buttons filter Twenty Twenty One injects extra markup into *every* menu to add the +/- buttons via a filter. Remove them by adding this PHP in your child theme’s functions.php file: Recommended Settings Menu Alignment To align the menu to the right of the site title, set the Menu Bar Alignment to Right in the Control Panel. Because the theme uses a flexbox header, you may wish to add this CSS to align the menu to the right edge of the content area: You may also wish to set the Bound Submenu To setting to Unbounded to allow the submenu to expand beyond the width of the menu bar. To bound the submenu to the theme’s […]

WooCommerce

UberMenu supports WooCommerce Product and Product Category menu items, and includes the ability to add cart summary and mini cart widget to your menu. Basic Menu Item Compatibility UberMenu has standard WooCommerce compatibility – you can add Products and Product category menu items to your mega menu. If they do not appear by default, you can activate them in your Appearance > Menus > Screen Options: and they will appear in the sidebar: These items function the same as any other item in your menu. Featured Images Featured images are supported both for static items and dynamic items. Products You can use the Dynamic Featured Image Inheritance feature to automatically display the featured image for the product. Product Categories As of UberMenu v3.7, the featured images functionality also supports WooCommerce Product Category images. WooCommerce Item Layouts There are two WooCommerce item layout options that will display the price and product image. Dynamically display WooCommerce Products and Product Categories In addition to adding static items as shown above, you can use Dynamic Terms to display WooCommerce Product Categories and Dynamic Posts to display WooCommerce Products dynamically. Cart Info/Summary Since UberMenu 3.5 You can add a cart summary (item count and total price) via the [ubermenu_woocommerce_cart_info] shortcode. Learn more about How to add a cart summary info item to your menu Cart Widget Dropdown You can display a mini cart in your submenu via the WooCommerce cart widget. Learn more about How to add a WooCommerce cart widget to your mega menu dropdown

WPML Compatibility

Translating Mega Menus for multilingual WordPress sites WPML is a plugin that allows you to translate your website content into any number of languages you want. It works on business, portfolio, eCommerce, and any other type of website you might have. WPML gives you the flexibility to translate the site content yourself, work with local translators, or send your website content to be translated by professional translation services. When translating a site into multiple languages, WPML helps you manage different menus for each language, and this is where UberMenu and WPML compatibility comes into play. We’ve worked directly with the WPML team to ensure compatibility between the two plugins so that you can use UberMenu and WPML together to create multilingual menus on your site. Please see the notes on specific WPML features below. Translating Menus WPML allows you to set up different menus for each language on your site. You can translate your menus manually, or allow WPML to synchronize your menu content. Please review WPML’s Menu Translation Guide for further details on basic menu translation. Translating Custom Menu text WPML String Translation will allow users to translate custom menu text, such as Custom Link navigation labels. It is also worth mentioning the Advanced Translation Editor, as it makes the process of translating your website content easier by offering an HTML-free translation experience, automatic translation, a glossary, and more. Menu Syncing As of UberMenu v3.7.5 and WPML v4.5.1, UberMenu menu item settings and types should be properly synced between languages when using the WPML sync system. If you are using either earlier versions of either plugin, these settings will not sync and menus will need to be managed independently until you update. For more information, please see our WPML Menu Sync Guide WPML Language Selector You can enable the […]

Kallyas (hogash)

You may need to use Manual Integration to replace the Kallyas menu to prevent the theme from interfering with UberMenu on mobile. Current Solution Current versions of Kallyas have changed the header significantly. The menu function is now pluggable, so to manually integrate you can add this PHP in the functions.php of your child theme: Depending on which header style you are using, you may want to adjust Kallyas’s flex sizing to allow the menu to be full width on mobile, by adding something similar to this in your CSS Tweaks You can adjust the menu positioning, etc, in the UberMenu Control Panel, if necessary. Old Solution To manually integrate the menu, copy the header.php into a child theme. Then find the code for the main menu (look for the HTML start and end contents, as the code itself may change in the theme): Conditionally replace it with UberMenu like this:

Oblivion (SkyWarrior)

Oblivion by SkyWarrior introduces major residual styling (see also: residual styling troubleshooting guide) and residual scripting from the theme, which breaks UberMenu. 1. Remove Residual Styling To remove the residual styling, we need to edit `header.php`. You’ll find the NAVBAR section We need to remove all of that and just use Once we do that, the menu will expand to the full width of the window, so we need to go to UberMenu > Advanced Settings and set the Menu Bar Width to 1170 Next, we need to make sure the content area clears the menu properly, so we add this CSS ( Adding Custom CSS ). 2. Remove Residual Scripting This script in the theme’s global.js adds scripting and styling to the menu that breaks the UberMenu functionality (around line 66): Unfortunately, this script is too generically written (.sub-menu) to be easily deactivated. So it has to be manually removed from the javascript file. If this were based on a class like .navbar .sub-menu, then we wouldn’t have to actually edit the javascript file to prevent it from breaking the menu. 3. Adjust z-index Finally, we need to adjust the z-index to layer the menu over the slider properly so that the submenus don’t get obstructed.